<template>
    <el-container class="jxc_goods_product_container">
        <!--物料类目组件-->
        <CategoryTree ref="refCategoryTree" title="物料类目" detail @event="handleTreeEvent" />
        <el-main>
            <el-card class="box-card">
                <headerTemplate slot="header" ref="header"
                                :table-ref="tableOptions.ref"
                                :toolbar_buttons="headerOption.toolbar_buttons"
                                :toolbar_filter="headerOption.toolbar_filter"
                                :searchForm="searchForm"
                                @event="handleHeaderEvent">
                    <template slot="right_search">
                        <el-form-item label="物料编号" style="margin-top: 4px; margin-bottom: 4px;">
                            <el-input v-model="searchForm.goods_code" style="width: 100px" @change="getList"
                                      clearable />
                        </el-form-item>
                        <el-form-item label="物料名称" style="margin-top: 4px; margin-bottom: 4px;">
                            <el-input v-model="searchForm.goods_name" style="width: 100px" @change="getList"
                                      clearable />
                        </el-form-item>
                    </template>
                </headerTemplate>
                <vxeTableTemplate ref="xTable" :data="dataList" :options.sync="tableOptions"
                                  @event="handleTableEvent" />
            </el-card>
        </el-main>
    </el-container>
</template>

<script>
import fileApi from "@common/api/fileApi";
import provide from "@common/mixins/provide";
import BaseListContainer from "@common/views/common/BaseListContainer";

export default {
    extends: provide,
    name: "jxcGoodsProduct",
    components: {
        CategoryTree: () => import("../../components/CategoryTree"),
    },
    data() {
        let _this = this;
        return {
            currentNode: [],
            treeNodeKey: {},
            headerOption: {
                toolbar_buttons: [
                    {
                        id: 'refresh',
                        icon: 'el-icon-refresh-right',
                        show: true,
                        method: () => {
                            _this.getList(true);
                        },
                    },
                ],
                toolbar_filter: [],
            },
            searchForm: {},
            dataList: [],
            tableOptions: {
                ref: "goodsProductTable",
                container: ".jxc_goods_product_container",
                columns: [],
                baseColumns: [
                    {
                        label: '物料类目',
                        prop: 'category_name',
                        align: 'center',
                        permission: [ 'common', 'clothing'],
                    },
                    {
                        label: '物料编号',
                        prop: 'goods_code',
                        align: 'center',
                        permission: [ 'common', 'clothing'],
                    },
                    {
                        label: '物料名称',
                        prop: 'goods_name',
                        align: 'center',
                        permission: [ 'common', 'clothing'],
                    },
                    {
                        label: '计量单位',
                        prop: 'goods_unit',
                        align: 'center',
                        permission: [ 'common', 'clothing'],
                    },
                    {
                        label: '货品规格',
                        prop: 'specifications',
                        align: 'left',
                        minWidth: 300,
                        headerAlign: 'center',
                        permission: [ 'common', 'clothing'],
                        render: (h, { row }) => {
                            if (_this.$utils.isNotEmpty(row.spec_info)) {
                                return h("el-tag", `${row.spec_info}`);
                            }
                            if (row.specifications) {
                                let specificationArr = JSON.parse(row.specifications);
                                let arr = specificationArr.map(item => {
                                    return h("el-tag", {
                                        style: {
                                            'margin-right': '5px',
                                        },
                                        props: {},
                                    }, `${ item.specification }：${ item.value }`);
                                });
                                return h('div', {}, arr);
                            } else {
                                return h('div', {});
                            }
                        },
                    },
                    {
                        label: '吊牌价格',
                        prop: 'list_price',
                        align: 'center',
                        permission: ['clothing'],
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 4),
                    },
                    {
                        label: '货品价格',
                        prop: 'price',
                        align: 'center',
                        permission: [ 'common', 'clothing'],
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 4),
                    },
                    {
                        label: '平均成本',
                        prop: 'avg_in_price',
                        align: 'center',
                        permission: [ 'common', 'clothing'],
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 4),
                    },
                    {
                        label: '货品条码',
                        prop: 'bar_code',
                        align: 'center',
                        width: 120,
                        permission: [ 'common', 'clothing'],
                    },
                    {
                        label: '物料主图',
                        prop: 'goods_pic_file_sid',
                        align: 'center',
                        permission: [ 'common', 'clothing'],
                        render(h, { row }) {
                            let fileApiUrl = fileApi.url;
                            if (row.goods_pic_file_sid) {
                                return h("el-image", {
                                    style: {
                                        width: "35px",
                                        height: "35px",
                                        padding: '2px',
                                    },
                                    props: {
                                        src: fileApiUrl.getFile + _this.$utils.getAccountSetSidEndWithSlash() + row.goods_pic_file_sid,
                                        previewSrcList: [ fileApiUrl.getFile + _this.$utils.getAccountSetSidEndWithSlash() + row.goods_pic_file_sid ],
                                    },
                                });
                            } else {
                                return h('div', {
                                    style: {
                                        height: '48px',
                                    },
                                }, '');
                            }
                        },
                    },
                    {
                        label: '物料简介',
                        prop: 'goods_brief',
                        align: 'center',
                        permission: [ 'common', 'clothing'],
                    },
                ],
                operates: {
                    list: [
                        {
                            id: "edit",
                            icon: 'el-icon-edit-outline',
                            type: 'primary',
                            size: 'mini',
                            show: true,
                            tooltip: {
                                content: '设置条码',
                            },
                            permission: 'jxc:goodsProduct:setBarCode',
                            method: (index, row) => {
                                _this.openProductDialog(row);
                            },
                        },
                        {
                            id: "edit",
                            icon: "fa fa-info-circle",
                            type: "warning",
                            size: 'mini',
                            show: true,
                            tooltip: {
                                content: '历史价格',
                            },
                            permission: 'jxc:goodsProduct:historyPrice',
                            method: (index, row) => {
                                _this.openHistoryPriceDialog(row);
                            },
                        },
                    ]
                },
                pagination: {
                    pageIndex: 1,
                },
            },
            setting: {},
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        async init() {
            const _this = this;
            await _this.getInitSetting();
            _this.initTableOptions();
            _this.getList(true);

        },
        //
        async getInitSetting() {
            const _this = this;
            _this.clothPresetSizeList = [];
            _this.setting = await _this.$store.dispatch('jxc/initSetting');
        },
        initTableOptions() {
            const _this = this;
            let columns = _this.tableOptions.baseColumns.map(item => $.extend({}, item));
            columns = columns.filter(item => item.permission.indexOf(_this.setting.industry_config) !== -1);
            _this.tableOptions = $.extend({}, _this.tableOptions, {columns});
        },
        handleTreeEvent(event) {
            let _this = this;
            if ([ 'all', 'refresh' ].indexOf(event.type) !== -1) {
                _this.treeNodeKey = event.data || {};
                _this.getList(true);
                return;
            }
            _this.currentNode = event.node;
            if (event.type === "nodeClick") {
                _this.treeNodeKey = event.data;
                _this.getList(true);
            }
        },
        // 刷新、查询
        handleHeaderEvent(event) {
            let _this = this;
            _this.searchForm = $.extend({}, _this.searchForm, event.searchForm);
            if (event.type === "search") {
                _this.getList(true);
            } else if (event.type === "refresh") {
                _this.getList(true);
            }
        },
        // 获取列表信息
        getList(query) {
            let _this = this;
            if (query) {
                _this.tableOptions = _this.resetTablePagination(_this.tableOptions);
            }
            let queryData = _this.getQueryParams(_this.tableOptions, _this.searchForm);
            // if (_this.treeNodeKey && _this.treeNodeKey.sid) {
            //     queryData.category_sid = _this.treeNodeKey.sid;
            // }
            if (_this.treeNodeKey && _this.treeNodeKey.full_code) {
                queryData.category_full_code = _this.treeNodeKey.full_code;
            }
            queryData.project_type = 'jxc';
            _this.fetchData(_this.$api.API_FindJxcGoodsProducts, queryData).then(result => {
                _this.dataList = result.data || [];
                _this.tableOptions = _this.setTableTotal(_this.tableOptions, result);
            }).catch(() => {
            });
        },
        handleTableEvent(event) {
            if (event.type === 'page') {
                this.getList();
            }
        },
        openProductDialog(row) {
            const _this = this;
            if (!row) {
                return;
            }
            _this.$dialog({
                title: '设置条码',
                width: '800px',
                component: {
                    value: null,
                    props: {
                        row,
                    },
                },
                confirmed() {
                    _this.getList();
                },
            });
        },
        openHistoryPriceDialog(row) {
            const _this = this;
            _this.$dialog({
                title: `${ row.goods_name }（${ row.spec_name }）-历史价格`,
                width: '500px',
                component: {
                    value: BaseListContainer,
                    props: {
                        propsData: {
                            hideHeader: true,
                            list_url: _this.$api.API_QueryHistoryPriceByProductSid,
                            query: {
                                type: 'both',
                                product_sid: row.sid,
                            },
                            tableOptions: {
                                ref: 'JxcSaleQuotationHistoryPriceTable',
                                columns: [
                                    {
                                        label: "历史销售价",
                                        prop: "price",
                                        align: "center",
                                    },
                                    {
                                        label: "历史采购价",
                                        prop: "buy_cost",
                                        align: "center",
                                    },
                                ],
                                pagination: false,
                                getMaxHeight() {
                                    return $(_this.getActiveTabsContainer()).height() * 0.8 - 250;
                                },
                            },
                        },
                    },
                },
                hideConfirmBtn: true,
            });
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.jxc_goods_product_container {
    /deep/ .el-image-viewer__close {
        top: 40px;
        right: 40px;
        width: 40px;
        height: 40px;
        font-size: 40px;
        color: #FFFFFF;
    }
}
</style>
